{% extends 'admin/base.html'%}

{% block body%}
<div class="container-fluid">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>添加角色</h4>
                </div>
                <div class="card-body">
                    <form action="{{url_for('role.add')}}" method="post" novalidate>
                        {{form.csrf_token}}
                        <div class="form-group">
                            <label for="title">{{form.name.label}}</label>
                            {{form.name(class='form-control')}}
                        </div>
                        {% for message in form.name.errors%}
                        <div class="form-group" style="color: #f96868!important;">{{message}}</div>
                        {% endfor %}

                        <div class="form-group">
                            <label for="produce_total">授权菜单</label>
                            <table>
                                {% for menu in tree%}
                                <tr>
                                    <td>
                                        <label class="lyear-checkbox checkbox-inline checkbox-primary">
                                            <input type="checkbox" name="auths[]" value="{{menu.id}}"
                                                onclick="selectAll(this,'{{menu.id}}')" id="role_{{menu.id}}" autocomplete="off">
                                            <span> {{menu.name}} </span>
                                        </label>
                                    </td>
                                    <td style="padding-left: 30px;">
                                        {% if menu.children%}
                                        {% for children in menu.children %}
                                        <div style="line-height: 40px;">
                                            <label class="lyear-checkbox checkbox-inline checkbox-primary"
                                                style="width: 160px;">
                                                <input type="checkbox" onclick="selectOne(this, '{{menu.id}}')"
                                                    name="auths[]" class="child_{{menu.id}}" id="role_{{children.id}}" value="{{children.id}}"><span>
                                                    {{children.name}}
                                                </span>
                                            </label>
                                            {% if children.children%}
                                            {% for child in children.children %}
                                            <div style="display:inline-block;margin-right:10px;width: 130px;">
                                                <label class="lyear-checkbox checkbox-inline checkbox-primary">
                                                    <input type="checkbox"
                                                        onclick="selectTwo(this, '{{menu.id}}', '{{children.id}}')"
                                                        name="auths[]" class="child_{{menu.id}} parent_{{children.id}}"
                                                        id="role_{{child.id}}" value="{{child.id}}"><span>
                                                        {{child.name}}
                                                    </span>
                                                </label>
                                            </div>
                                            {% endfor %}
                                            {% endif %}
                                        </div>
                                        {% endfor %}
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </table>
                        </div>
                        <div class="form-group">
                            {{form.submit(class='btn btn-primary')}}
                            <a class="btn btn-default" href="{{url_for('role.index')}}">返 回</a>
                        </div>
                    </form>

                </div>
            </div>
        </div>

    </div>
</div>
{% endblock%}
{%block foot%}
<script type="text/javascript">
    function selectAll(obj, id) {
        var flag = $(obj).is(":checked");
        if (flag == true) {
            $(".child_" + id).prop("checked", true);
        } else {
            $(".child_" + id).prop("checked", false);
        }
    }

    function selectOne(obj, parent_id) {
        //设置父级的选中状态
        var flag = $(obj).is(":checked");
        var parentid = $(obj).val();
        if (flag == true) {
            $("#role_" + parent_id).prop("checked", true);
            $(".parent_" + parentid).prop("checked", true)
        } else {
            $(".parent_" + parentid).prop("checked", false)
            if (hasSelectCount($(".child_"+ parent_id)) == 0) {
                $("#role_" + parent_id).prop("checked", false);
            }
        }
    }
    function selectTwo(obj, parent_id, pid) {
        var flag = $(obj).is(":checked");
        if (flag == true) {
            $("#role_" + pid).prop("checked", true);
            $("#role_" + parent_id).prop("checked", true);
        } else {
            //判断是否已经全部取消
            if(hasSelectCount($(".parent_" + pid)) == 0) {
                //取消上一级选中
                $("#role_" + pid).prop("checked", false);
                //判断第二级是否还有选中
                if(hasSelectCount($(".child_" + parent_id)) == 0) {
                    //取消一级选中
                    $("#role_" + parent_id).prop("checked", false);
                }
            }
        }
    }
    function hasSelectCount(obj) {
        var count = 0;
        obj.each(function (k, v) {
            if ($(this).is(":checked")) {
                count++;
            }
        });
        return count;
    }
</script>
{% endblock%}